<template>
  <section>
    <div class="filter-container">
        <span style="color:red;font-size:18px;font-weight:bold;margin-right:30px;">{{ pageDetail.title }}</span>
        <common-input @keyup.enter.native="handleFilter" class="w200" placeholder="商品关键字" v-model="listQuery.keyword" />
        
        <el-button size="mini" class="ml10" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
            <el-button size="mini" class="ml10" @click="handleCreate" type="primary" icon="el-icon-plus">选择商品</el-button>
    </div>
    <el-alert
            v-if="ids&&ids.length>0"
            show-icon>
        <template slot="title">
            <span>已选择 {{ids.length}} 项</span> <el-button @click="clear()" type="text">清空</el-button> <el-button @click="remove()" type="text">移除出专场</el-button>
        </template>
    </el-alert>
    <el-table ref="dataTable" :height="tableHeight" :data="list"
                        @selection-change="selectChange"
                        @sort-change="tblSort"
                style="width: 100%">
            <el-table-column
                    fixed
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column align="right" label="展示排序">
                <template slot-scope="scope">
                    <span>{{scope.row.orderNum}}</span>
                    <i @click="editOrder(scope.row)" class="el-icon-edit ml10" style="cursor:pointer;color:#F4222D;"></i>
                </template>
            </el-table-column>
            <el-table-column align="left" label="" width="120">
                <template slot-scope="scope">
                    <span><img :src="scope.row.imgUrl" style="width:80px;cursor:pointer;" /></span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="商品">
                <template slot-scope="scope">
                    <span>{{scope.row.title}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="来源">
                <template slot-scope="scope">
                    <span>{{scope.row.platformName}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="分类">
                <template slot-scope="scope">
                    <span v-if="scope.row.parentCateId>0">{{scope.row.parentCateName}}<span v-if="scope.row.cateId>0">-{{scope.row.cateName}}</span></span>
                </template>
            </el-table-column>
            <el-table-column width="100" align="right" label="售价" sortable="custom" prop="price">
                <template slot-scope="scope">
                    <span>￥{{scope.row.price}}</span>
                </template>
            </el-table-column>
            <el-table-column width="100" align="right" label="佣金比例" sortable="custom" prop="promotion_rate">
                <template slot-scope="scope">
                    <span>￥{{scope.row.promotionRate}}</span>
                </template>
            </el-table-column>
            <el-table-column width="100" align="right" label="佣金" sortable="custom" prop="promotion">
                <template slot-scope="scope">
                    <span>￥{{scope.row.promotion}}</span>
                </template>
            </el-table-column>
            <el-table-column width="100" align="right" label="优惠券" sortable="custom" prop="coupon_discount">
                <template slot-scope="scope">
                    <span>{{scope.row.couponDiscount}}</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNum" :page-sizes="[20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
        </div>

    <el-dialog title="编辑排序" :visible.sync="dialogOrderVisible" :close-on-click-modal="false" width="300px">
        <el-form :model="orderForm" ref="orderForm" label-width="80px">
            <el-form-item label="排序" prop="orderNum">
                <el-input size="mini" type="number" placeholder="" maxlength="3" v-model="orderForm.orderNum" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="dialogOrderVisible=false">取消</el-button>
            <el-button :loading="orderLoading" size="mini" type="primary" @click="okOrder">确定</el-button>
        </div>
    </el-dialog>

    

    <el-dialog title="选择商品" :visible.sync="dialogProductVisible" :close-on-click-modal="false" width="1000px">
        <product-list :formData.sync="productForm" @okSelect="okSelectProduct" />
        <div slot="footer" class="dialog-footer">
            <el-button size="mini" type="primary" @click="dialogProductVisible=false">关闭</el-button>
        </div>
    </el-dialog>
  </section>
</template>

<script>
    import {
        product_page_relate_list,
        product_add_to_page,
        product_page_detail,
        product_remove_from_page,
        product_update_page_order
    } from '../../api/product';
    import {
        retail_product_page_relate_list
    } from '../../api/retail_product';
    import Viewer from 'viewerjs';
    import 'viewerjs/dist/viewer.css';
    export default {
        components: {
            'product-list': () => import('../../components/Retail/list'),
        },
        data() {
            return {
                dialogProductVisible: false,
                productForm: {
                    is_select: true
                },
                viewerId: null,
                orderLoading: false,
                tableHeight: 200,
                cateList: [],
                parentCateList:[],
                list: null,
                listLoading: true,
                listQuery: {
                    pageNum: 1,
                    pageSize: 20,
                    agency: undefined,
                    keyword: undefined,
                    auditStatus: '3',
                    orderCol: "",
                    orderAsc: "",
                    cateId: undefined,
                    parentCateId: undefined,
                    status: '0',
                    getSaleCount: 1
                },
                total: null,
                activeName: '1',
                currentId: 0,
                checkLoading: false,
                dialogOrderVisible: false,
                orderForm: {
                    pageId: 0,
                    productId: 0,
                    orderNum: 0,
                },
                dialogStockVisible: false,
                stockLoading: false,
                ids: [],
                pageId: 0,
                pageDetail: {}
            }
        },
        mounted() {
            const that = this

            window.onresize = () => {

                return (() => {

                    that._getTableHeight()

                })()
            }
        },
        created() {
            this.pageId = parseInt(this.$route.query.id);
            this._getTableHeight();
            this.getList();
            this.getDetail();
        },
        methods: {
            getDetail() {
                product_page_detail(this.pageId).then((res)=>{
                    this.pageDetail = res.data;
                }).catch((err)=>{

                })
            },
            okSelectProduct(ids) {
                product_add_to_page(
                    {
                        pageId: this.pageId,
                        ids: ids
                    }
                ).then((res)=>{
                    this.$message.success("商品已加入专区");
                    this.getList();
                    this.dialogProductVisible = false;
                }).catch((err)=>{

                })
                // console.log(ids)
            },
            handleCreate() {
                this.dialogProductVisible = true;
            },
            _getTableHeight() {
                this.tableHeight = window.innerHeight - 250
            },
            getList() {
                this.listLoading = true;
                retail_product_page_relate_list(this.pageId, this.listQuery).then(response => {
                    this.list = response.data.list;
                    this.total = response.data.total;
                    this.listLoading = false;
                })
            },
            viewPic(row) {
                if(row.imgUrls) {
                    let all_pic = row.imgUrls.split(",");
                    $("#pic_viewer").html("");
                    if(all_pic && all_pic.length > 0) {
                        all_pic.forEach((item, idx)=>{
                            var str  = '<li style="width:100%;">';
                            str += '<img rel-src="' + item + '" src="' + item + '">';
                            str += '</li>';
                            $("#pic_viewer").append(str);
                        })
                    }
                    this.viewerId && this.viewerId.destroy()
                    this.viewerId = new Viewer(document.getElementById('pic_viewer'));
                    $('#pic_viewer').find("img").eq(0).trigger("click")
                }
            },
            handleFilter() {
                this.listQuery.pageNum = 1;
                this.getList();
            },
            handleSizeChange(val) {
                this.listQuery.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.listQuery.pageNum = val;
                this.getList();
            },
            dialogClose() {
                this.$refs.form.resetFields();
            },
            tblSort(d) {
                this.listQuery.orderCol = d.prop;
                this.listQuery.orderAsc = d.order;

                this.handleFilter();
            },
            editOrder(row) {
                this.orderForm.pageId = this.pageId;
                this.orderForm.productId = row.id;
                this.orderForm.orderNum = row.orderNum;

                // console.log(this.orderForm)
                this.dialogOrderVisible = true;
            },
            okOrder() {
                this.orderLoading = true;
                product_update_page_order(this.orderForm).then((res)=>{
                    this.orderLoading = false;
                    this.dialogOrderVisible = false;
                    this.$message.success("排序已更新");

                    this.getList();
                }).catch((err)=>{
                    this.orderLoading = false;
                })
            },
            selectChange(selection) {
                this.ids = [];
                if(selection && selection.length > 0) {
                    selection.forEach((item)=>{
                        this.ids.push(item.id)
                    })
                }
                // console.log(this.ids)
            },
            clear() {
                this.$refs.dataTable.clearSelection();
            },
            remove() {
                this.$confirm('确定移除出专场?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        product_remove_from_page({
                            ids: this.ids,
                            pageId: this.pageId
                        })
                            .then(() => {
                                this.$message.success("已移除出专场");
                                this.getList();
                            });
                    }).catch(()=>{});

            }
        }
    };
</script>
<style lang="scss" scoped>
</style>
